<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./css/details.css">
<script src="./js/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<body>
<div class="app">
    <header>
        <el-page-header @back="goBack" content="我的订单">
        </el-page-header>
    </header>
    <div class="table" style="width: 95vw; margin: 50px auto;">
        <template>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed prop="date" label="日期" width="200">
                </el-table-column>
                <el-table-column prop="username" label="用户名" width="200">
                </el-table-column>
                <el-table-column prop="bearing" label="商品名称" width="400">
                </el-table-column>
                <el-table-column prop="price" label="价钱" width="200">
                </el-table-column>
                <el-table-column prop="address" label="收货地址" width="400">
                </el-table-column>
                <el-table-column prop="phone_number" label="手机号" width="200">
                </el-table-column>
            </el-table>
        </template>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '.app',
        data() {
            return {
                tableData: [
                    <c:forEach var="orderListWidthBstr" items="${orderListWidthBstrList}" varStatus="status">
                    {
                        date: '${orderListWidthBstr.order.datetime}',
                        username: '${user.username}',
                        bearing: '${orderListWidthBstr.bstr}',
                        price: '${orderListWidthBstr.order.total}',
                        address: '${user.address}',
                        phone_number: '${user.phoneNumber}'
                    }
                    <c:if test="${!status.last}">, </c:if> <!-- 如果不是最后一个元素，则添加逗号 -->
                    </c:forEach>
                ]
            }
        }
        , methods: {
            goBack() {
                console.log('go back');
            }
        }
    })
</script>

</html>